<template>
  <el-timeline>
    <el-timeline-item
      v-for="item in chapterData"
      :key="item.id"
      :timestamp="item.timestamp"
      placement="top"
      ><el-card
        ><h4>{{ item.content }}</h4></el-card
      ></el-timeline-item
    >
  </el-timeline>
</template>

<script setup>
// import { chapter } from '@/api/user'
import { ref } from 'vue'
import { watchSwitchLang } from '@/utils/i18n'

const chapterData = ref([])
const getChapter = async () => {
  const getData = {
    success: true,
    code: 10000,
    data: [
      {
        content: '课程导读',
        timestamp: '第一章',
        id: 1
      },
      {
        content: ' 标准化大厂编程规范解决方案之ESLint + Git Hooks ',
        timestamp: '第二章',
        id: 2
      },
      {
        content: '项目架构解决方案之搭建登录基础架构',
        timestamp: '第三章',
        id: 3
      },
      {
        content: '项目架构解决方案之搭建Layout基础架构',
        timestamp: '第四章',
        id: 4
      },
      {
        content: '后台项目前端综合解决方案之 通用功能开发',
        timestamp: '第五章',
        id: 5
      },
      {
        content: 'vue3 + element plus 综合实现解决方案之个人中心页面',
        timestamp: '第六章',
        id: 6
      },
      {
        content: 'excel 、zip 与前端结合解决方案之用户管理页面实现',
        timestamp: '第七章',
        id: 7
      },
      {
        content: '权限控制解决方案之角色、权限页面渲染实现项目的权限控制功能',
        timestamp: '第八章',
        id: 8
      },
      {
        content: '列表排序解决方案之实现热门文章排名',
        timestamp: '第九章',
        id: 9
      },
      {
        content: '文章编辑解决方案之实现创建文章功能',
        timestamp: '第十章',
        id: 10
      },
      {
        content: '错误综合处理方案之错误页面的统一处理',
        timestamp: '第十一章',
        id: 11
      },
      {
        content: '项目发布解决方案之构建与发布',
        timestamp: '第十二章',
        id: 12
      },
      {
        content: '课程总结',
        timestamp: '第十三章',
        id: 13
      }
    ],
    message: '获取资料成功'
  }
  chapterData.value = getData.data
}
getChapter()
watchSwitchLang(getChapter())
</script>

<style lang="scss" scoped></style>
